<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { MenuVo } from '@/api/menu/type'
import type { FormInstance, FormRules } from 'element-plus'
import {
  addMenuRequest,
  deleteMenuRequest,
  queryAllMenusRequest,
  updateMenuRequest,
} from '@/api/menu'
import { useUserStore } from '@/stores/userStore'

// 控制对话框是否弹出，true-弹出，false-隐藏
const dialogVisible = ref(false)
// 菜单vo
let menuVo = ref<MenuVo>({
  menuID: 0,
  menuName: '',
  menuCode: 0,
  parentId: 0,
  nodeType: '',
  linkUrl: '',
  level: 0,
  path: '',
  operation: '',
  authorityValue: '',
  children: [] as MenuVo[],
})
// 表单实例
const ruleFormRef = ref<FormInstance>()
// 表单校验规则
const rules = reactive<FormRules<MenuVo>>({
  menuName: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50之间', trigger: 'change' },
  ],
  authorityValue: [
    { required: true, message: '请输入权限值', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50之间', trigger: 'change' },
  ],
})
// 确定按钮单击事件
const save = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      if (menuVo.value.menuID === 0) {
        await addMenuRequest(menuVo.value).then(() => {
          queryAllMenus()
          dialogVisible.value = false
        })
      } else {
        await updateMenuRequest(menuVo.value).then(() => {
          queryAllMenus()
          dialogVisible.value = false
        })
      }
    }
  })
}
// 菜单集合
let menuVos = ref<MenuVo[]>([])
// 查询全部菜单
const queryAllMenus = async () => {
  await queryAllMenusRequest().then((res) => {
    menuVos.value = res
  })
}
// 查询全部菜单
onMounted(async () => {
  await queryAllMenus()
})
// 添加菜单按钮单击事件
const addMenu = (row: MenuVo) => {
  dialogVisible.value = true
  menuVo = ref<MenuVo>({
    menuID: 0,
    menuName: '',
    menuCode: 0,
    parentId: 0,
    nodeType: '',
    linkUrl: '',
    level: 0,
    path: '',
    operation: '',
    authorityValue: '',
    children: [] as MenuVo[],
  })
  menuVo.value.level = row.level + 1
  menuVo.value.parentId = row.menuID
}
// 编辑菜单按钮单击事件
const editMenu = async (row: MenuVo) => {
  dialogVisible.value = true
  Object.assign(menuVo.value, row)
}
// 删除菜单按钮单击事件
const deleteMenu = async (row) => {
  let menuID = row.menuID
  await deleteMenuRequest(menuID).then(() => {
    queryAllMenus()
  })
}
// 引入用户仓库
const userStore = useUserStore()
const buttons = userStore.buttons
</script>

<template>
  <div class="el-table">
    <el-table border row-key="menuID" :data="menuVos">
      <el-table-column prop="menuName" label="名称" align="center" />
      <el-table-column prop="authorityValue" label="权限值" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            v-if="scope.row.level < 2 && buttons?.includes('AddMenu')"
            type="primary"
            @click="addMenu(scope.row)"
            :disabled="scope.row.level === 3"
          >
            添加菜单
          </el-button>
          <el-button
            v-else-if="buttons?.includes('AddMenu')"
            type="primary"
            @click="addMenu(scope.row)"
            :disabled="scope.row.level === 3"
          >
            添加功能
          </el-button>
          <el-button
            type="primary"
            :disabled="scope.row.level === 0"
            @click="editMenu(scope.row)"
            v-if="buttons?.includes('EditMenu')"
          >
            编辑
          </el-button>
          <el-popconfirm title="确定删除吗?" @confirm="deleteMenu(scope.row)">
            <template #reference>
              <el-button
                type="danger"
                :disabled="scope.row.level === 0"
                v-if="buttons?.includes('DeleteMenu')"
              >
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="menuVo.menuID === 0 ? '添加菜单' : '编辑菜单'"
      v-model="dialogVisible"
      width="600"
    >
      <el-form
        label-width="auto"
        label-position="right"
        :model="menuVo"
        ref="ruleFormRef"
        :rules="rules"
        node-key="menuID"
        :default-expanded-keys="[9, 11]"
      >
        <el-form-item label="名称" prop="menuName">
          <el-input v-model="menuVo.menuName"></el-input>
        </el-form-item>
        <el-form-item label="权限值" prop="authorityValue">
          <el-input v-model="menuVo.authorityValue"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.el-table {
  margin: 1rem;
}
</style>
